<!-- 本页样式 -->

<style scoped>
.del-dialog-cnt {
    font-size: 16px;
    text-align: center;
}
</style>
<!-- 页面布局-->
<template>
<div class="table">
    <!-- 标题导航栏 -->
    <div class="title-box crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>
                <i class="el-icon-tickets"></i>卡操作
            </el-breadcrumb-item>
            <el-breadcrumb-item>写卡任务</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!-- 主体区 -->
    <div class="container">
        <!-- 查询条件 -->
        <div class="search-box">
            <div class="search-item-box">
                <table>
                    <tr>
                        <td rowspan="2">
                            <i class="el-icon-search"></i>
                        </td>
                        <td class="search_td" style="width: 120px;">
                            <el-select v-model="parampters.result" clearable placeholder="写卡结果">
                                <el-option label="成功" value="true"></el-option>
                                <el-option label="失败" value="false"></el-option>
                                <el-option label="未知" value="new"></el-option>
                            </el-select>
                        </td>
                        <td class="search_td" style="width: 150px;">
                            <el-select v-model="parampters.crmResult" clearable placeholder="回传CRM结果">
                                <el-option label="成功" value="true"></el-option>
                                <el-option label="失败" value="false"></el-option>
                            </el-select>
                        </td>
                        <td class="search_td" style="width:250px;">
                            <el-input v-model="parampters.sequenceId" placeholder="交易流水号" clearable class="handle-input mr10"></el-input>
                        </td>
                        <td class="search_td" style="width:250px;">
                            <el-input v-model="parampters.iccid" placeholder="ICCID" clearable class="handle-input mr10"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td class="search_td" style="width: 120px;">
                            <el-input v-model="parampters.phoneNumber" placeholder="手机号" clearable class="handle-input mr10" style="width:130px;"></el-input>
                        </td>
                        <td class="search_td" style="width: 150px;">
                            <el-select v-model="parampters.isp" clearable placeholder="运营商">
                                <el-option label="联通" value="10010"></el-option>
                                <el-option label="电信" value="10000"></el-option>
                            </el-select>
                        </td>
                        <td class="search_td" style="width: 250px;">
                            <el-date-picker v-model="parampters.starttime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请求时间起始" class="handle-input mr10" style="width:250px;">
                            </el-date-picker>
                        </td>
                        <td class="search_td" style="width: 250px;">
                            <el-date-picker v-model="parampters.endtime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请求时间终止" class="handle-input mr10" style="width:250px;">
                            </el-date-picker>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="search-button-box">
                <el-button type size="small" icon="el-icon-download" @click="toExportExcel">导出</el-button>
                <el-button type="primary" size="small" icon="search" @click="searchLoad">查询</el-button>
            </div>
        </div>
        <!-- 查询条件END -->
        <!-- 数据列表 -->
        <div class="grid-data-box">
            <el-table v-loading="tableLoading" :max-height="tableListHeight" :data="tableData" border :cell-class-name="changeColumnClass" :header-cell-style="{background:'#F3F3F3',color:'#606266'}" show-overflow-tooltip style="width: 100%" ref="multipleTable">
                <el-table-column type="index" label="序号" width="50" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sequenceId" label="交易流水号" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="iccid" label="ICCID" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="imsi" label="IMSI" width="130" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phoneNumber" label="手机号" width="120" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column prop="isp" label="运营商" width="100" :formatter="formatter" show-overflow-tooltip></el-table-column>
                <el-table-column prop="result" label="写卡结果" width="100" :formatter="formatter" show-overflow-tooltip></el-table-column>
                <el-table-column prop="timestamp" label="创建时间" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column prop="errorMsg" label="失败原因" minWidth="150" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.result == 'new' && scope.row.isp == '10010'" size="mini" @click="toRecycle(scope.row)" type="danger">回收</el-button>
                        <el-button v-if="ifPostCrm(scope.row.errorMsg)" size="mini" @click="toBackPostCRM(scope.row)" type="primary">回传CRM</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 数据列表END -->
        <!-- 翻页导航条 -->
        <div class="navigate-box">
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" :total="parampters.totalCount" @size-change="handleSizeChange" :current-page.sync="parampters.pageIndex" :page-sizes="[20, 50, 100, 200]" :page-size="parampters.pageRows" layout="total, sizes, prev, pager, next"></el-pagination>
            </div>
        </div>
        <!-- 翻页导航条END -->
    </div>
    <!-- 主体区END -->
</div>
</template>

<script>
export default {
    data() {
        return {
            // 筛选条件
            parampters: {
                //查询参数
                loginsid: "", //登录会话SID
                pageRows: 20, //每页行数
                pageIndex: 1, //当前页
                pageCount: 0, //总页数
                totalCount: 0, //总记录数
                result: "", //写卡结果
                crmResult: "",
                sequenceId: "", //交易流水号
                iccid: "", //iccid
                phoneNumber: "", //手机号
                isp: "", //运营商
                starttime: null, //请求时间起始
                endtime: null, //请求时间终止
            },
            // 查询出的表格数据
            tableLoading: true,
            tableData: [],
            //confirm提示信息弹框
            confirmBox: null,
            //所选记录id
            selectedId: "",
            //事物类型
            actType: "list",
            //字典集
            dicts: {}
        };
    },
    // 进入页面加载数据
    activated() {
        this.$set(this.parampters, "result", "");
        this.$set(this.parampters, "crmResult", "");
        this.$set(this.parampters, "sequenceId", "");
        this.$set(this.parampters, "phoneNumber", "");
        this.$set(this.parampters, "isp", "");
        this.$set(this.parampters, "starttime", "");
        this.$set(this.parampters, "endtime", "");
        this.handleInitLoad();
    },
    methods: {

        /**
         * 组件初始化加载
         */
        handleInitLoad() {
            this.initSelectOptoins();
            this.searchLoad();
        },

        /**
         * 初始加载字典选项
         */
        initSelectOptoins() {
            this.loadSelectOptoins("isp", null);
        },

        /**
         * 通用定义:下拉字典
         *  @augments dictKind 字典类型
         */
        loadSelectOptoins(dictKind, params) {
            let url = "/rps/dictionary/";
            this.$axios
                .get(url, {
                    params: {
                        type: dictKind
                    },
                    headers: {
                        operator: this.$util.getLoginer().userid,
                        withCredentials: true
                    }
                })
                .then(res => {
                    let data = res.data;
                    if (data.success) {
                        this.$set(this.dicts, dictKind, data.data.list);
                    } else {
                        console.log(data.message);
                        // this.$error( "查询失败" + data.message );
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },

        changeColumnClass(data) {
            // if (data.columnIndex == 1 || data.columnIndex == 2) {
            // 	return "tabcolumn_left";
            // }
        },

        /**
         * @augments  row 行所在的数据
         * 表格数据列 内容字典转换
         */

        formatter(row, column) {
            if (column.property == "isp") {
                return this.$dicts.transDict(this.dicts.isp, "code", "name", row.isp);
            } else if (column.property == "result") {
                switch (row.result) {
                    case "true":
                        return "成功";
                    case "false":
                        return "失败";
                    case "new":
                        return "未知";
                    default:
                        return "";
                }
            } else if (column.property == "timestamp") {
                if (row.timestamp == undefined || row.timestamp == null || row.timestamp == "") {
                    return "";
                } else {
                    let now = new Date(Number(row.timestamp));
                    let y = now.getFullYear();
                    let m = now.getMonth() + 1;
                    let d = now.getDate();
                    return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
                }
            }
        },

        /**
         * @augments val 页码
         * 切换页码操作
         */
        handleCurrentChange(val) {
            this.parampters.pageIndex = val;
            // 重新获取当前页码的数据
            this.searchLoad();
        },

        /**
         * @augments val 每页显示条数
         * 每页显示条数修改
         */
        handleSizeChange(val) {
            // 修改每页显示条数
            this.parampters.pageRows = val;
            // 重新获取数据
            this.searchLoad();
        },

        /**
         * 条件筛选查询,加载数据
         */
        searchLoad() {
            this.parampters = this.$util.trimObjStr(this.parampters);
            this.parampters.loginsid = this.$util.getLoginer().sessionId;
            this.tableLoading = true;
            this.$axios
                .get("/rps/cardPersonalLogs/?" + new Date().getTime(), {
                    params: this.parampters,
                    headers: {
                        operator: this.$util.getLoginer().userid,
                        withCredentials: true
                    }
                })
                .then(res => {
                    let data = res.data;
                    if (data.success) {
                        this.tableData = data.data.list;
                        this.tableLoading = false;
                        this.parampters.pageIndex = data.data.pageNum != undefined ? parseInt(data.data.pageNum) : 1;
                        this.parampters.pageCount = data.data.totalPage != undefined ? parseInt(data.data.totalPage) : 0;
                        this.parampters.totalCount = data.data.count != undefined ? parseInt(data.data.count) : 0;
                    } else {
                        this.tableLoading = false;
                        this.$error(data.message);
                    }
                })
                .catch(err => {
                    this.tableLoading = false;
                    console.log(err);
                });
        },
        toExportExcel() {
            alert("等待接口开发")
            return;
            this.$axios
                .get("/rps/cardPersonalLog/export/", {
                    params: this.parampters,
                    headers: {
                        operator: this.$util.getLoginer().userid,
                        withCredentials: true
                    }
                })
                .then(res => {
                    let data = res.data;
                    // 关闭提交表单的loading
                    if (data.success) {
                        let downloadUrl = data.data;
                        let n = downloadUrl.split("/");
                        var link = document.createElement('a');
                        //设置下载的文件名
                        link.download = n[n.length - 1];
                        link.style.display = 'none';
                        //设置下载路径
                        link.href = downloadUrl;
                        //浏览器兼容，禁止打开新的页面
                        link.target = "_self";
                        //触发点击
                        document.body.appendChild(link);
                        link.click();
                        //移除节点
                        document.body.removeChild(link);
                    } else {
                        this.$error(data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //联通写卡失败，回收recycle
        toRecycle(row) {
            this.confirmBox = this.$dialog.confirm("确定要回收吗？");
            this.confirmBox.exec.then(btnName => {
                if (btnName == "ok") {
                    this.$axios
                        .put("/rps/cardPersonalLogs/" + row.cardPersonalLogId + "/recycle/", null, {
                            headers: {
                                operator: this.$util.getLoginer().userid,
                                withCredentials: true
                            }
                        })
                        .then(res => {
                            let data = res.data;
                            if (data.success) {
                                this.$dialog.close(this.confirmBox.vm);
                                this.$message({
                                    message: "回收成功",
                                    type: "success"
                                });
                                this.searchLoad();
                            } else {
                                this.$dialog.close(this.confirmBox.vm);
                                this.$error(data.message);
                            }
                        })
                        .catch(err => {});
                } else {
                    this.$dialog.close(this.confirmBox.vm); // 取消删除数据操作
                }
            })
        },
        ifPostCrm(errorMsg) {
            errorMsg = errorMsg + "";
            if (errorMsg.includes('回传CRM失败')) return true;
            return false;
        },
        //回传CRM
        toBackPostCRM(row) {
            this.$axios
                .post("/rps/cardPersonalLogs/" + row.cardPersonalLogId + "/postCrm/", null, {
                    headers: {
                        operator: this.$util.getLoginer().userid,
                        withCredentials: true
                    }
                })
                .then(res => {
                    let data = res.data;
                    if (data.success) {
                        this.$message({
                            message: data.message,
                            type: "success"
                        });
                        this.searchLoad();
                    } else {
                        this.$error(data.message);
                    }
                })
                .catch(err => {});
        }
    },
    filters: {
        result: (value) => {
            switch (value) {
                case "true":
                    return "成功";
                case "false":
                    return "失败";
                case "new":
                    return "未知";
                default:
                    return "";
            }
        }
    }
};
</script>
